<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>一个主页</title>
  <script src="js/weather-icon.js"></script>
  <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
  <!-- layui引入 -->
  <script src="layui/layui.js"></script>
  <link rel="stylesheet" href="layui/css/layui.css" />
  <link rel="stylesheet" href="css/basic.css" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <div id="main-container">
    <div class="weather-container">
      <div class="weather-icon">

      </div>
      <div id="tem"></div>
      <div id="tips"></div>
      <ul id="box"></ul>
    </div>

    <div class="serach-container">
      <div class="layui-tab layui-tab-brief serach-area" lay-filter="serachTabs">
        <ul class="layui-tab-title">
          <li class="layui-this">百度</li>
          <li>谷歌</li>
          <li>必应</li>
          <li>Lookao</li>
        </ul>
        <div class="layui-tab-content">
          <form id="search-form" action="https://www.baidu.com/s?tn=baidu" target="_blank" method="get">
            <input class="serach" type="serach" id="keyword" name="word" placeholder="吾将上下而求索" />
            <input class="float-right" id="serach-submint" type="submit" value="搜索" />
          </form>
        </div>
        <!-- <div class="layui-tab-item layui-show">
              <form action="https://www.baidu.com/s?tn=baidu" target="_blank" method="get">
              <input
                class="serach"
                type="serach"
                id="keyword"
                name="word"
                placeholder="吾将上下而求索"
              />
              <input class="float-right" type="submit" value="搜索">
            </form>
            </div>
            <div class="layui-tab-item">2</div>
            <div class="layui-tab-item">3</div>
            <div class="layui-tab-item">4</div> -->
      </div>
    </div>
  </div>
  <div class="url-container">
    <div class="layui-tab" lay-filter="url-tables">
      <ul class="layui-tab-title url-table-title">
        <li class="layui-this">常用</li>
        <li>学习</li>
        <li>娱乐</li>
        <li>编程</li>
        <li>收藏</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="url-info">
            <ul>
              <li>热门</li>
              <li><a href="https://www.baidu.com/" target="_blank">百度</a>
              </li>
              <li><a href="https://www.google.com/" target="_blank">谷歌</a></li>
              <li><a href="https://cn.bing.com/" target="_blank">必应</a></li>
              <li><a href="https://www.sogou.com/" target="_blank">搜狗</a></li>
              <li><a href="https://www.toutiao.com/" target="_blank">今日头条</a></li>
              <li><a href="https://jandan.net/" target="_blank">煎蛋</a></li>
              <li><a href="http://www.dgtle.com/" target="_blank">数字尾巴</a></li>
            </ul>
            <ul>
              <li>社交</li>
              <li><a href="https://www.weibo.com/" target="_blank">微博</a></li>
              <li><a href="https://tieba.baidu.com/" target="_blank">贴吧</a></li>
              <li><a href="https://www.zhihu.com/" target="_blank">知乎</a></li>
              <li><a href="https://www.douban.com/" target="_blank">豆瓣</a></li>
              <li><a href="https://www.v2ex.com/" target="_blank">V2EX</a></li>
              <li><a href="https://www.jianshu.com/" target="_blank">简书</a></li>
              <li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
            </ul>
            <ul>
              <li>资讯</li>
              <li><a href="https://www.163.com/" target="_blank">网易</a></li>
              <li><a href="http://www.qq.com/" target="_blank">腾讯</a></li>
              <li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li>
              <li><a href="http://www.sohu.com/" target="_blank">搜狐</a></li>
              <li><a href="http://www.ifeng.com/" target="_blank">凤凰网</a></li>
              <li><a href="http://www.people.com.cn/" target="_blank">人民网</a></li>
              <li><a href="http://xinhuanet.com/" target="_blank">新华网</a></li>
            </ul>
            <ul>
              <li>购物</li>
              <li><a href="https://www.taobao.com/" target="_blank">淘宝</a></li>
              <li><a href="https://www.jd.com/" target="_blank">京东</a></li>
              <li><a href="https://www.amazon.cn/" target="_blank">亚马逊</a></li>
              <li><a href="https://www.suning.com/" target="_blank">苏宁易购</a></li>
              <li><a href="https://you.163.com/" target="_blank">网易严选</a></li>
              <li><a href="https://www.mi.com/" target="_blank">小米商城</a></li>
              <li><a href="https://www.smzdm.com/" target="_blank">什么值得买</a></li>
            </ul>
            <ul>
              <li>视频</li>
              <li><a href="https://www.youku.com/" target="_blank">优酷</a></li>
              <li><a href="https://www.iqiyi.com/" target="_blank">爱奇艺</a></li>
              <li><a href="https://v.qq.com/" target="_blank">腾讯视频</a></li>
              <li><a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a></li>
              <li><a href="https://www.youtube.com/" target="_blank">YouTube</a></li>
              <li><a href="https://www.douyu.com/" target="_blank">斗鱼直播</a></li>
              <li><a href="https://www.huya.com/" target="_blank">虎牙直播</a></li>
            </ul>
            <ul>
              <li>工作</li>
              <li><a href="https://cn.linkedin.com/" target="_blank">领英</a></li>
              <li><a href="https://www.lagou.com/" target="_blank">拉勾网</a></li>
              <li><a href="https://www.zhaopin.com/" target="_blank">智联招聘</a></li>
              <li><a href="https://www.51job.com/" target="_blank">前程无忧</a></li>
              <li><a href="http://www.yingjiesheng.com/" target="_blank">应届生</a></li>
              <li><a href="https://maimai.cn/" target="_blank">脉脉</a></li>
              <li><a href="https://www.v2ex.com/?tab=jobs" target="_blank">酷工作</a></li>
            </ul>
            <ul>
              <li>生活</li>
              <li><a href="https://www.meituan.com/" target="_blank">美团</a></li>
              <li><a href="https://www.dianping.com/" target="_blank">大众点评</a></li>
              <li><a href="https://www.ctrip.com/" target="_blank">携程</a></li>
              <li><a href="https://www.qunar.com/" target="_blank">去哪儿</a></li>
              <li><a href="https://www.alitrip.com/" target="_blank">飞猪</a></li>
              <li><a href="https://kyfw.12306.cn/otn/index/init" target="_blank">12306</a></li>
              <li><a href="https://www.mafengwo.cn/" target="_blank">马蜂窝</a></li>
            </ul>
            <ul>
              <li>便捷</li>
              <li><a href="https://fanyi.baidu.com/" target="_blank">词典翻译</a></li>
              <li><a href="http://www.weather.com.cn/live/" target="_blank">天气预报</a></li>
              <li><a href="https://www.kuaidi100.com/" target="_blank">快递查询</a></li>
              <li><a href="https://cn.office-converter.com/" target="_blank">在线转换</a></li>
              <li><a href="https://send.firefox.com/" target="_blank">临时网盘</a></li>
              <li><a href="https://wx.qq.com/" target="_blank">网页微信</a></li>
              <li><a href="https://mail.qq.com/" target="_blank">QQ邮箱</a></li>
            </ul>
          </div>
        </div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
      </div>
    </div>
  </div>
</body>

</html>

<script async>
  //一般直接写在一个js文件中
  var url = [
    "https://www.baidu.com/s?tn=baidu",
    "https://www.google.com/search",
    "https://cn.bing.com/search",
    "https://lookao.com/search"
  ];
  var weatherIcon = {
    xue: snowCloud,
    qing: sunshine,
    yin: sunCloud,
    yun: cloud,
    yu: rainCloud
  };
  layui.use(["layer", "form", "element", "jquery"], function () {
    var layer = layui.layer,
      form = layui.form,
      element = layui.element,
      $ = layui.$;

    //   for (let i = 0; i < 4; i++) {
    //   element.tabAdd("serachTabs", {
    //     title: "111",
    //     content: `<p>asdasdasdasd</p>`, //支持传入html
    //     id: i+1
    //   });
    //   element.tabChange('serachTabs', '1')
    // }
    element.on("tab(serachTabs)", function (data) {
      console.log(data.index); //得到当前Tab的所在下标
      $("#search-form").attr("action", url[data.index]);
      data.index
        ? $("#keyword").attr("name", "q")
        : $("#keyword").attr("name", "wd");
    });

    $.ajax({
      type: "GET",
      url: "https://www.tianqiapi.com/api/",
      data: "version=v1&appid=98595487&appsecret=dA4p3WUt",
      dataType: "JSON",
      error: function () {
        layer.msg("获取天气失败");
      },
      success: function (res) {
        $(".weather-icon").append(weatherIcon[res.data[0].wea_img]);
        //$("#box").append("<li>City: " + res.city + "</li>");
        //$("#box").append("<li>Weather: " + res.data[0].wea + "</li>");
        $("#tem").append(res.data[0].tem);

        // 遍历数组
        $("#tem").on({
          mouseenter: function () {
            var that = this;
            tips = layer.tips(res.data[0].air_tips, "#tem", {
              tips: [3, "#909090"],
              area: 'auto'
            });
          },
          mouseleave: function () {
            layer.close(tips);
          }
        });

        for (var i = 0; i < res.data[0].hours.length; i++) {
          $("#hours").append(
            "<li>" +
            (i + 1) +
            ": 时间: " +
            res.data[0].hours[i].day +
            " 气温: " +
            res.data[0].hours[i].tem +
            " </li >"
          );
        }
      }
    });
    // $(".url-info ul li a").each(function (index, element) {
     
    //   let a =$(this)
    //   let url = a.attr("href")
    //   $(this).append(`<img src="${url}favicon.ico" alt="${a.text()}">`)
      
    // })
    $(".layui-tab-item").height($(".url-info").height())
    function mixSearch() {
      // https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E6%95%B0%E6%8D%AE&tn=baidulocal
      var okeyword = $("keyword");
      var oForm = $("searchForm");
      //提交给百度，构造地址参数
      oForm.action = "http://www.baidu.com/s";
      okeyword.name = "wd";
      oForm.method = "get";
      oForm.target = "baiduFrame";
      oForm.submit();
      //提交给bing，构造地址参数
      oForm.action = "http://hk.bing.com/search";
      okeyword.name = "q";
      oForm.method = "get";
      oForm.target = "bingFrame";
      oForm.submit();
    }
  });
</script>
<style>
  .layui-tab-title li {
    color: #9a9a9a;
  }

  .layui-tab-brief>.layui-tab-title .layui-this {
    color: #000;
  }
</style>